<template>
    <div class="pageContainer" style="width:100%;">
        <el-descriptions class="margin-top" title="基础信息" :column="3" border>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-user"></i>
                    订单编号
                </template>
                {{order.orderNo}}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-mobile-phone"></i>
                    下单时间
                </template>
                {{order.orderTime}}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-location-outline"></i>
                    发货类型
                </template>
                {{ order.washType == 1 ? '门店自取' : '送货上门' }}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-tickets"></i>
                    订单金额
                </template>
                {{ order.total }}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-office-building"></i>
                    订单备注
                </template>
                {{order.markDesc}}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-office-building"></i>
                    收货人
                </template>
                {{order.reciveUserName}}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-office-building"></i>
                    收货电话
                </template>
                {{order.reciveTel}}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-office-building"></i>
                    收货地址
                </template>
                {{order.reciveAddress}}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-office-building"></i>
                    订单状态
                </template>
                {{orderStatus}}
            </el-descriptions-item>
        </el-descriptions>
        <div style="margin: 20px 0px;">
            <el-tag>商品列表</el-tag>
        </div>
        <el-table :data="listOrderProduct">
            <el-table-column label="商品名称">
                <template slot-scope="scope">
                    <span>{{scope.row.productName}}</span>
                </template>
            </el-table-column>
            <el-table-column label="单价" prop="productPrice">
            </el-table-column>
            <el-table-column label="数量" prop="productCount">
            </el-table-column>
            <el-table-column  label="状态" style="width:500px">
                <template slot-scope="scope">
                    <span>{{washStatus[scope.row.washStatue + '']}}</span>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
import pagingMixin from '@/mixin/pagingMixin';


export default {
    mixins: [pagingMixin],
    props:{
        id: {
            type: String,
            default: ""
        }
    },
    data() {
        return {
            mm: {},
            washStatus: this.$status.washStatus,
            order: {},
            listOrderProduct: [],
        }
    },
    computed: {
        orderStatus() {
            if (this.order.orderType != undefined && this.order.status != undefined) {
                return this.$status.orderStatus[this.order.orderType][this.order.status];
            } else {
                return "";
            }
        }
    },
    created() {
    },
    mounted() {
        this.$scx.getOrderDetailById({id: this.id}).then(async res => {
            this.order = res.data.order;
            this.listOrderProduct = res.data.listOrderProduct;
            console.log(this.order);
        })
    },
    methods: {
    }
}
</script>

<style lang="scss" scoped>
.roleWarp {
    display: flex;
    flex-wrap: wrap;
}
</style>